<template>
    <view class="shenhe">
        <uv-sticky :offset-top="offsetTop">
            <view class="shenheHeader flex flex-align">
                <view class="left">
                    <image :src="datainfo.headimg"  mode="scaleToFill" />
                </view>
                <view class="right">
                    <view class="liveLogItemLeftInfo">
                        <view class="liveLogItemLeftInfoName flex flex-align">
                            <view class="name"> {{ datainfo.nickname }}</view>    
                            <view class="id flex flex-align"><image
                                src="/static/teamcenter/center09.png"
                                mode="scaleToFill"
                            />{{ datainfo.id }} </view>
                        </view>
                        <view class="liveLogItemLeftInfoID">注册时间：{{ datainfo.create_at }} </view>
                        <view class="liveLogItemLeftInfoID">登录时间：{{ datainfo.login_at }} </view>
                    </view>
                </view>
            </view>
        </uv-sticky>
        <view class="shenheCneter">
            <view v-if="list.length !== 0" class="list out-shadow flex flex-align" v-for="(item, index) in list"
                :key="index">
                <view class="right">
                    <view class="liveLogItemLeft flex flex-align">
                        <view class="liveLogItemLeftImg">
                            <image :src="item?.img_url" />
                        </view>
                        <view class="liveLogItemLeftInfo">
                            <view class="liveLogItemLeftInfoName"> {{ item?.subject }} </view>
                            <view class="liveLogInfoID">{{ item?.room_id }} </view>
                        </view>
                    </view>
                    <view class="liveLogFlex flex flex-align">
                        <view class="list flex-1">
                            <view class="title">观看总时长</view>
                            <view class="content">{{ item?.time }} </view>
                        </view>
                        <view class="list flex-1">
                            <view class="title">累计打卡次数</view>
                            <view class="content">{{ item?.sign_num }} <span>次</span></view>
                        </view>
                        <view class="list flex-1">
                            <view class="title">红包发放金额</view>
                            <view class="content">{{ item?.sign_red }} <span>元</span></view>
                        </view>
                    </view>
                    <view class="liveLogItemRight">
                        <view style="font-size: 24rpx;color: #999;font-weight: normal;margin-bottom: 5rpx;">发放状态及原因</view>
                        {{ item.remark}}
                    </view>
                </view>
                <view class="status blue-linear" :style="{background: item.remark?'':'#999'}">
                     {{ item.remark?'已签到':'未签到' }}
                </view>
            </view>
            <view v-else class="noData" style="padding-top: 10vh;">
                <image src="/static/nodata/nodata02.png" />
                <view class="noDataText">暂无数据</view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { useInfiniteLoad } from '@/hooks/useInfiniteScroll'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { ref, watch } from 'vue'
import API_CENTER from '@/api/teamcenter'
const datainfo =ref<Recordable>({})
const offsetTop = ref<Number>(0)
// 条件编译
// #ifdef H5
offsetTop.value = -44
// #endif
// #ifdef MP-WEIXIN
offsetTop.value = 0
// #endif
onLoad((e: any) => {
    params.uuid = e.id
    loadMore()
})


const { list, isLoading, hasMore, loadMore, reset ,params} = useInfiniteLoad(API_CENTER.getWatchLog, {
    initialParams: {},
    transformResponse: (response: any) => {
        datainfo.value = response.info
        return response.list || [];
    }
});

onReachBottom(() => {
    // 还有更多数据且不在加载中时，加载更多
    if (hasMore.value && !isLoading.value) {
        loadMore()
    }
})
</script>
<style scoped lang="scss">
.shenheHeader {
    background-color: #fff;padding: 30rpx;
    .left{
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 20rpx;
        image{
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }
    .right{
        flex: 1;line-height: 1.7;
        .liveLogItemLeftInfo{
            .liveLogItemLeftInfoName{
                font-size: 28rpx;
                font-weight: bold;
                .id{
                    font-size: 24rpx;margin-left: 10rpx;
                    color: #3C7CFF;background: #D4E3FF;padding: 0rpx 20rpx 0 0;border-radius: 30rpx;
                    image{width: 30rpx;height: 30rpx;margin-right: 6rpx;}
                }
            }
            .liveLogItemLeftInfoID{
                font-size: 24rpx;
                color: #999;
            }
           
        }
    }
}

.shenheCneter {
    padding: 30rpx;
    .liveLogFlex{
        .list{
            background:#F5F6FA ;margin-right: 20rpx;padding: 20rpx;border-radius: 20rpx;
            .title{
                font-size: 24rpx;margin-bottom: 5rpx;
                color: #999896;
            }
            .content{
                font-size: 26rpx;
                color: #323233;
                font-weight: bold;
            }
        }
        .list:last-child{
            margin-right: 0;
        }
    }
    .list {
        margin-bottom: 20rpx;
        background-color: #fff;
        padding: 30rpx 20rpx;
        border-radius: 30rpx;
        position: relative;

        .right {
            flex: 1;

            .liveLogItemLeft {
                margin-bottom: 20rpx;

                .liveLogItemLeftImg {
                    image {
                        width: 80rpx;
                        height: 80rpx;
                        border-radius: 50%;
                        margin-right: 20rpx;
                    }
                }

                .liveLogItemLeftInfo {
                    .liveLogItemLeftInfoName {
                        font-size: 28rpx;
                        font-weight: bold;
                    }

                    .liveLogItemLeftInfoID {
                        font-size: 24rpx;
                        color: #999;
                    }
                }
            }

            .liveLogItemRight {
                font-size: 24rpx;
                color: #323233;
                font-weight: bold;
                background: #F5F6FA;
                border-radius: 20rpx;
                padding:30rpx;
            }
             .liveLogInfoID{
                background: #D4E3FF;
                border-radius: 30rpx;
                font-size: 24rpx;margin-top: 10rpx;
                color: #3C7CFF;width: 150rpx;text-align: center;
            }
        }
    }
}


.status {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24rpx;
    color: #fff;
    padding: 6rpx 20rpx;
    border-radius: 0 30rpx 0 30rpx;
    font-weight: bold;
}
</style>
